Add MCP introspection support for Electron frontend with Copilot agent integration by Copilot · Pull Request #916 · thomasnordquist/MQTT-Explorer

Copilot · 2025-12-19T19:26:24Z

Implementation Complete: Add MCP Introspection Support for Electron Frontend

Summary

Minimal MCP introspection support for agentic development with GitHub Copilot, focused on essential functionality.

Core Implementation

Remote Debugging:

✅ Chrome DevTools Protocol via --enable-mcp-introspection flag
✅ Port validation (1-65535) with default port 9222
✅ Configurable via --remote-debugging-port=<port>

Testing:

✅ Automated test script (yarn test:mcp)
✅ Test handles async MQTT operations properly

Copilot Agent Support:

✅ .github/copilot-instructions.md - Complete setup and testing guide
- Project setup and build commands
- Test requirements: deterministic, independent, screenshots, async handling
- MQTT async operation guidelines with examples
- Test execution commands
✅ .github/workflows/copilot-setup.yml - Custom workflow with yarn caching

Simplified Documentation:

✅ MCP_INTROSPECTION.md - Minimal technical reference only (no duplicates)
✅ Removed verbose examples and unnecessary scripts

Quick Start

yarn build
electron . --enable-mcp-introspection

For Agentic Development

See .github/copilot-instructions.md for complete guidance on:

Project setup and build instructions
How to write deterministic and independent tests
Handling asynchronous MQTT operations
Screenshot requirements
Test execution commands

The custom workflow at .github/workflows/copilot-setup.yml provides yarn caching for faster builds.

Code Quality

All linters pass ✅
Build successful ✅
CodeQL security scan: 0 alerts ✅
Minimal, focused implementation ✅
No duplicate documentation ✅

Original prompt

This section details on the original issue you should resolve

<issue_title>Support introspection of Electron frontend using MCP</issue_title>
<issue_description>## Feature: Introspection of Electron Frontend using MCP

Summary

Add support for introspection of the Electron frontend in MQTT Explorer using MCP

Motivation

Create deterministic tests

Support copilot iwht agent mode using mcp (eg. playwiright)
</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Support introspection of Electron frontend using MCP #915

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

…ntegration Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

thomasnordquist · 2025-12-19T19:47:11Z

@copilot Update the project so it works well with agentic development using github copilot.
Provide screenshots of the applications as proof that the implementation works

…r agentic development Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot · 2025-12-19T19:56:39Z

@copilot Update the project so it works well with agentic development using github copilot.
Provide screenshots of the applications as proof that the implementation works

Implementation complete with proof of working MCP introspection!

What's been updated for agentic development:

✅ Automated test script (src/spec/testMcpIntrospection.ts) - Run with yarn test:mcp
✅ Documentation enhanced with screenshots showing the app running
✅ Easy testing via yarn start:mcp and yarn test:mcp commands

Screenshots proving it works:

The application successfully launches with MCP introspection enabled:

The test output confirms:

✓ App launches with --enable-mcp-introspection flag
✓ Remote debugging enabled on port 9222
✓ Chrome DevTools Protocol accessible at http://localhost:9222
✓ Full UI functionality maintained
✓ Perfect for GitHub Copilot agent mode with Playwright

For agentic development, developers can now:

Use yarn start:mcp to launch with introspection
Connect Playwright/Copilot agents to port 9222
Automate UI testing deterministically
Debug remotely via Chrome DevTools Protocol

Commit: 69d0d63

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

redirector.gvt1.com
- Triggering command: /proc/self/exe /proc/self/exe --type=utility --utility-sub-type=network.mojom.NetworkService --lang=en-US --service-sandbox-type=none --no-sandbox --disable-dev-shm-usage --crashpad-handler-pid=5085 --enable-crash-reporter=f9eff982-ad0c-4f4a-8ea1-eef1cf922e54,no_channel --user-data-dir=/home/REDACTED/.config/MQTT-Explorer --shared-files=v8_context_snapshot_data:100 --field-trial-handle=0,i,3581677643098544604,17963597181296388644,262144 --enable-features=NetworkService,NetworkServiceInProcess,kWebSQLAccess --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameL (dns block)
- Triggering command: /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/electron/dist/electron /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/electron/dist/electron -r /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/node_modules/playwright-core/lib/server/electron/loader.js --inspect=0 --remote-debugging-port=0 /home/REDACTED/work/MQTT-Explorer/MQTT-Explorer/dist/src/spec/../../.. --enable-mcp-introspection --remote-debugging-port=9222 --no-sandbox (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

thomasnordquist · 2025-12-19T20:10:05Z

@copilot

remove code, examples, readme that is not strictly necessary
add instructions for the copilot agent how to start the project, when writing new features there need to be tests, screenshots and the test need to be deterministic. As this tool allows the introspection of a message queue sending and receiving values is asynchronous, this needs to be taken in account when writing tests.
use caching for the yarn install, use a custom setup workflow for this like descibed here: https://docs.github.com/de/enterprise-cloud@latest/copilot/how-tos/use-copilot-agents/coding-agent/customize-the-agent-environment?utm_source=changelog-docs-cca-selfhosted-runners&utm_medium=changelog&utm_campaign=universe25

…ent instructions and yarn caching workflow Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

…ions Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot · 2025-12-19T20:16:31Z

@copilot

remove code, examples, readme that is not strictly necessary

add instructions for the copilot agent how to start the project, when writing new features there need to be tests, screensho...

All requested changes complete:

Removed unnecessary code:

✅ Deleted examples/playwright-mcp-example.js
✅ Deleted scripts/start-with-mcp.sh
✅ Deleted scripts/verify-mcp-implementation.sh
✅ Removed start:mcp script from package.json
✅ Simplified MCP_INTROSPECTION.md (170 lines → 38 lines)
✅ Removed MCP section from README

Added Copilot agent instructions:

✅ Created .github/copilot-instructions.md with:
- Project setup commands (build, run, dev)
- Test writing requirements (deterministic, screenshots)
- MQTT async operation handling guidelines
- Test patterns and examples
- Test execution commands

Added yarn caching workflow:

✅ Created .github/workflows/copilot-setup.yml
✅ Implements yarn cache as per GitHub docs
✅ Caches node_modules and app/node_modules
✅ Uses workflow_call trigger for reusability

Key guidance for async MQTT testing:

Wait for message propagation
Use event-based waiting vs fixed timeouts
Account for network latency
Example test pattern included

Commits: d91633a, 0a3dfd0

thomasnordquist · 2025-12-19T20:21:10Z

@copilot - add to the copilot instructions that tests should be independant

remove everything from MCP_INTROSPECTION.md that is already covered by the copilot-instructions

…CP_INTROSPECTION.md Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot · 2025-12-19T20:26:10Z

@copilot - add to the copilot instructions that tests should be independant

remove everything from MCP_INTROSPECTION.md that is already covered by the copilot-instructions

Changes complete:

Added test independence requirement:

✅ Updated .github/copilot-instructions.md
✅ Added "Tests MUST be independent" as requirement Please provide builds for download #2
✅ Tests should run in isolation without depending on other tests

Removed duplicate content:

✅ Simplified MCP_INTROSPECTION.md from 38 lines to 12 lines
✅ Removed usage instructions (covered in copilot-instructions)
✅ Removed testing commands (covered in copilot-instructions)
✅ Removed developer guidelines (covered in copilot-instructions)
✅ Kept only technical reference and config info
✅ Added reference to copilot-instructions for full details

Commit: e0b2dce

Initial plan

2d8b976

Copilot AI assigned Copilot and thomasnordquist Dec 19, 2025

Copilot started work on behalf of thomasnordquist December 19, 2025 19:26 View session

Copilot AI and others added 4 commits December 19, 2025 19:35

Add MCP introspection support for Electron frontend with Playwright i…

0046656

…ntegration Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Fix prettier formatting in electron.ts and add verification script

5a77542

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Fix code review issues: add port validation and improve example script

463c44d

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Improve port argument validation to handle malformed arguments

7a99aeb

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add support for introspection of Electron frontend using MCP~~ Add MCP introspection support for Electron frontend Dec 19, 2025

Copilot AI requested a review from thomasnordquist December 19, 2025 19:44

Copilot finished work on behalf of thomasnordquist December 19, 2025 19:44

Copilot started work on behalf of thomasnordquist December 19, 2025 19:47 View session

Add MCP introspection test, screenshots, and improve documentation fo…

69d0d63

…r agentic development Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Refactor test script to use constants and robust path resolution

a5f908d

Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot finished work on behalf of thomasnordquist December 19, 2025 20:00

Copilot started work on behalf of thomasnordquist December 19, 2025 20:10 View session

Copilot AI and others added 2 commits December 19, 2025 20:14

Simplify MCP implementation: remove unnecessary files, add Copilot ag…

d91633a

…ent instructions and yarn caching workflow Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Fix workflow caching logic and remove hardcoded version from instruct…

0a3dfd0

…ions Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot AI changed the title ~~Add MCP introspection support for Electron frontend~~ Add MCP introspection support for Electron frontend with Copilot agent integration Dec 19, 2025

Copilot finished work on behalf of thomasnordquist December 19, 2025 20:17

Copilot started work on behalf of thomasnordquist December 19, 2025 20:21 View session

Add test independence requirement and remove duplicate content from M…

e0b2dce

…CP_INTROSPECTION.md Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

Copilot finished work on behalf of thomasnordquist December 19, 2025 20:26

Delete MCP_INTROSPECTION.md

03c5639

thomasnordquist approved these changes Dec 19, 2025

View reviewed changes

thomasnordquist marked this pull request as ready for review December 19, 2025 20:30

thomasnordquist enabled auto-merge (squash) December 19, 2025 20:36

thomasnordquist self-requested a review December 19, 2025 20:45

thomasnordquist approved these changes Dec 19, 2025

View reviewed changes

thomasnordquist disabled auto-merge December 19, 2025 20:46

thomasnordquist merged commit 4843b2e into master Dec 19, 2025
1 check passed

Navigation Menu

Uh oh!

Add MCP introspection support for Electron frontend with Copilot agent integration - #916

Add MCP introspection support for Electron frontend with Copilot agent integration#916
thomasnordquist merged 11 commits into
masterfrom
copilot/support-introspection-electron-frontend

Copilot AI commented Dec 19, 2025 •

edited

Loading

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

Copilot AI commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation Complete: Add MCP Introspection Support for Electron Frontend

Summary

Core Implementation

Quick Start

For Agentic Development

Code Quality

Summary

Motivation

Comments on the Issue (you are @copilot in this section)

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025

Uh oh!

thomasnordquist commented Dec 19, 2025

Uh oh!

Copilot AI commented Dec 19, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 19, 2025 •

edited

Loading

Copilot AI commented Dec 19, 2025 •

edited

Loading